<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <div class="rap_goodslist">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="(item,index) in rows" :key="index">
          <!-- <router-link class="rap_rout" :to="{path:'/rapdetail/'+item.ID}" tag="div"> -->
          <div class="rap_rout" @click="goDetailFn(item.ID)">
            <div class="list_l">
              <div class="rap_ph">
                <img :src="item.TP[0]"/>
              </div>
              <div class="rap_cont">
                <div class="tit">{{item.SPMC}}</div>
                <!--<span v-if="item.SFYS=='1'">预售</span>-->
                <div class="price">
                  <span :style="textColor">¥{{item.XJ}}</span>
                  <span v-if="item.JE">原价:¥{{item.JE}}</span>
                </div>
                <span :style="textColor">(库存{{item.KC}})</span>
                <!-- <div class="ms" v-html="item.MSTEXT"></div> -->
                <!--<p class="ms2" v-if="item.XGCS > 0">数量限制{{item.XGCS}}，{{item.XJ}}元抢购</p>
                                <p class="ms2" v-else>{{item.XJ}}元抢购</p>-->
              </div>
            </div>
            <div class="rap_xqbtn" :style="backgroundColor">立即抢购</div>
          </div>
          <!-- </router-link> -->
        </li>
      </ul>
    </div>
    <div class="list-loading" v-if="loading">
      <i class="iconfont icon-loading"></i> 加载中...
    </div>
    <div v-else>
      <div v-if="forbid" class="forbid">
        没有更多了...
      </div>
    </div>
    <!--底部占位-->
    <div class="zanwei-bottom"></div>
  </div>
</template>

<script>
  import api from '@/api/api'
  import {
    Toast, Badge
  } from 'mint-ui';

  export default {
    data() {
      return {
        isBack: false,
        loading: true,
        num: 1,
        numSize: 8,
        rows: [],
        forbid: false,
        jfhlfl: '8a8189496403076801640307a1ab0003',
        goodslist: []
      }
    },
    methods: {
      loadMore() {
        this.num++
        if (this.forbid) {
          return false
        }
        this.loading = true;

        this.getListDataFn(this.jfhlfl, this.numSize, this.num);
        console.log(this.num)
        // this.loading = false;
      },
      getListDataFn(jfhlfl, row, num) {
        let page = this
        api.scoreToGift(page, jfhlfl, row, num, cb)

        function cb(res) {

          if (res.code == 0) {
            let data = JSON.parse(res.data)
            console.log(data)
            console.log(data.rows)
            if (data.rows.length !== 0) {
              let rows = data.rows.map(y => {
                let TP = y.TP.map(x => {
                  return page.host.filehost + x
                })
                y.TP = TP
                return y
              })
              page.rows = page.rows.concat(rows)
            } else {
              page.forbid = true
            }

          } else {
            Toast({
              message: res.msg,
              duration: 3000
            });
          }
          setTimeout(function () {
            page.loading = false;
          }, 1000)
        }
      },
      goDetailFn(id) {
        let page = this;
//      this.$router.push('/faddishdetail/' + id)
        let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
        // 检查过期
        if (!this.$util.checkValidity()) {
          return
        }
        api.scoreToGiftDetail(page, userinfo.vipcode, id, cb);

        function cb(res) {
          if (res.code !== 0) {
            Toast({
              message: res.msg,
              duration: 2000
            });
            page.rows = [];
            page.getListDataFn(page.jfhlfl, page.numSize, page.num, page.sort, page.orderby);
          } else {
            page.$router.push('/faddishdetail/' + id)
          }
        }
      }
    },
    mounted() {
      let page = this;
      page.getListDataFn(page.jfhlfl, page.numSize, page.num);

    }
  }

</script>

<style lang="less">
  .rap_goodslist {
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 0.2rem 0;
        border-bottom: 0.01rem solid #e2e2e2;

        .rap_rout {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .list_l {
          display: flex;
        }

        .rap_ph {
          border-radius: 0.06rem;
          margin: 0 0.15rem 0 0.1rem;

          img {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 0.06rem;
          }
        }

        .rap_cont {
          width: 4.1rem;

          div {
            color: #333;
          }

          span {
            font-size: 0.28rem;
            color: #F05DC4;
            line-height: 0.4rem;
            display: block;
            margin-top: 0.12rem;
          }

          p {
            font-size: 0.28rem;
            color: #bdbdbd;
            line-height: 0.4rem;
          }

          .tit {
            font-size: 0.28rem;
            font-weight: bold;
            line-height: 0.42rem;
          }

          .ms {
            font-size: 0.28rem;
            line-height: 0.4rem;
            margin-top: 0.12rem;
            width: 4.1rem;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

            & > * {
              padding: 0 !important;
              margin: 0 !important;
              font-size: 0.28rem !important;
              color: #bdbdbd !important;
              line-height: 0.36rem !important;
            }
          }

          .ms2 {
            margin-top: 0.12rem;
          }

          .price {
            display: flex;
            justify-content: space-between;

            span {
              &:nth-child(2) {
                text-decoration: line-through;
                color: #999999;
                margin-right: 0.4rem;
              }
            }
          }
        }

        .rap_xqbtn {
          width: 1.42rem;
          height: 0.46rem;
          color: #fff;
          font-size: 0.24rem;
          text-align: center;
          line-height: 0.46rem;
          background-color: #F05DC4;
          border-radius: 0.1rem;
          margin-right: 0.2rem;
        }
      }
    }
  }

  .forbid {
    padding: 0.2rem;
    text-align: center;
  }

</style>
